<template>
	<div class="web" :style="{height:htmlH}">
		<div class="login_page">
			<h2 class="title">BlueJ FE</h2>
			<div class="input1">
				<div class="img">
				   <i class="iconfont icon-yonghu"></i>
				</div>
				<input type="" v-model="userName" name="" id="" value="" />
			</div>
			<!--<p class="p1">请输入正确用户名</p>-->
			<div class="input1">
				<div class="img">
				   <i class="iconfont icon-suo"></i>
				</div>
				<input class="second" @input="change" v-model="pass"  :type="[isshow?cipher:blocipher]" />
				<div class="img">
				   <i :class="[isshow?iconfont:iconfont2]" @click="transposing"></i>
				</div>
			</div>
			<!--<p  class="p2"><span v-show="noSee">密码不能小于5位</span></p>-->
			<button @click="login" type="button">
  	 <span>
        Sign in
      </span>
  </button>
		</div>
	</div>
</template>



<script>
	import axios from "axios"
	export default {
		data() {
			return {
				htmlH: "",
				htmlW: "",
				pass: "",
				userName: "",
				timer: 0,
				reg: "",
				noSee: false,
				cipher:"password",
				blocipher:"text",
				isshow:true,
				iconfont:"iconfont icon-yan",
				iconfont2:'iconfont icon-iconcloseeye'	,
			}
		},
		created(){
		},
		mounted() {
			let htmlH = window.innerHeight;
			let htmlW = window.innerWidth;
			this.htmlH = htmlH + "px";
			this.htmlW = htmlW + "px";
		},
		methods: {
			change() {
				clearTimeout(this.timer);//节流的防抖			
				this.timer = setTimeout(() => {
//					console.log(this.pass);
//					console.log(this.userName)
//					this.pass
					//密码的正则
//					this.reg = /^[0-9a-zA-Z_]{5,}$/;//5位以上的数字下画线，字母
//					console.log(this.reg);
//					if(this.reg.test(this.pass)) {
//						console.log("正确")
//						this.noSee = false
//					} else {
//						console.log("错误")
//						this.noSee = true
//					}
				}, 1000)
			},
			transposing(){
				this.isshow=!this.isshow
			},
			login(){
				console.log(this.pass)
				axios.post("http://yaochiwan2.bluej.cn/user/login", {
					//提交数据到服务器
					password: this.pass,
					username: this.userName
				}).then((response)=>{
					//成功的话返回token值
						//判断返回的token是否正确，
						
						if(typeof(response.data.token)=="undefined"){
							alert("用户名或密码错误！");
						}else{
							alert("登录成功");
							this.$Cookie.set("token",response.data.token);
							this.$store.commit("setToken");
							this.$router.push({//编程式导航
								path: "/",
							})
						}
						
			       })
				.catch((err)=>{
					alert("输入的账号或密码错误")
				})
//				
					
			}
		}
	}
</script>
<style lang="scss" scoped="scoped">
@import url(//at.alicdn.com/t/font_998195_8ezp2u0h3ti.css);
	.web {
		width: 100%;
		height: 100%;
		background: #2d3a4b;
		z-index: 2;
	    padding-top: 150px;
	}
	
	.login_page {
		/*background: #00000012;*/
		width: 350px;
		margin: 0 auto 40px;
		h2 {
			width: 100%;
			text-align: center;
			line-height: 40px;
			margin-bottom: 25px;
			color:#fff;
			letter-spacing: 2px;
		}
		.input1{
			 width: 100%;	
	     /*background: #00000012;*/
			 /*text-align: center;*/
			.img{
				display:inline-block; 
				text-align: center;
				font-size: 26px;
				width: 10%;
				height: 100%;
			 background: #00000012;
			 padding-bottom: 8px;
			  padding-top: 3px;
			 color: white;
			}
			input{
				display:inline-block; 
				/*块级元素才能margin 0 auto*/
				width: 90%;
				/*margin: 0 auto;*/
				padding: 15px 5px 12px 15px;
				margin-bottom: 20px;
				box-sizing:border-box;
				outline: none;
				color: white;
				background: #00000012;
				border: none;
				/*border-radius: 5px;*/
			}
			.second{
					display:inline-block; 
				 	width: 80%!important;
					display:inline-block; 
			}
		}
		button {
			background: skyblue;
			display: inline-block;
			width: 100%;
			font-size: 18px;
			color: white;
			padding: 15px 5px 12px 15px;
		}
	}
	p{
		height: 20px;
		width: 100%;
		color: brown;
		margin-bottom: 20px;
	}
</style>